<template>
  <div style="margin:100px auto;">
    <img src="../assets/logo_trans.png" style="width: 200px; height: 100px; margin:20px auto;" />
    <el-card class="box-card" shadow="hover">
      <div slot="header" class="clearfix">用户登录</div>
      <el-form ref="form" :model="user" label-width="80px">
        <el-form-item label="用户名称">
          <el-input v-model="user.userName" placeholder="请输入用户名"></el-input>
        </el-form-item>
        <el-form-item label="用户密码">
          <el-input v-model="user.password" placeholder="请输入密码" show-password></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="Login()" style="margin-right: 75px;" plain>登录</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>
  
<script>
export default {
  data() {
    return {
      user: {},
    };
  },
  methods: {
    Login() {
      this.$axios.post("/users/login",this.$qs.stringify(this.user))
      .then(res => {
        if (res.data.code == 200) {
          this.$message({
            message:res.data.message,
            type:"success"
          })
          sessionStorage.setItem("menuList",JSON.stringify(res.data.data.menuList))
          sessionStorage.setItem("user",JSON.stringify(res.data.data.user))
          sessionStorage.setItem("authorization",res.data.data.token);

          this.$router.push("/index");
          
        }else {
          this.$message({
            message:res.data.message,
            type:"error"
          })
        }
      })
    },
  },
  mounted() {

  },
};
</script>

<style>
.text {
  font-size: 14px;
  color: #409eff;
}

.item {
  margin-bottom: 18px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both;
}

.box-card {
  margin: 0px auto;
  width: 480px;
  border-radius: 35px 0px 35px 0px;
}
</style>